<script setup>
import {useRoute, useRouter} from "vue-router";
import {ref} from "vue";
import useStore from "../store/index.js";
import {dayjs} from "@arco-design/web-vue/es/_utils/date.js";
import {addUserApi, logoutApi, updateUserApi} from "../apis/UserApi.js";
import {Message} from "@arco-design/web-vue";
import {BASE_URL} from "../config/index.js";

const currentPath = ref([]);
const router = useRouter()
const route = useRoute()
const store = useStore()
const goPath = (path) => {
    router.push(path)
}
const isUpdate = ref(false)
const isShowConfig = ref(false)
const form = ref({})
const formRef = ref()

const handleEdit = (data) => {
    form.value = JSON.parse(JSON.stringify(store.userinfo))
    isShowConfig.value = true
    form.value.userPassword = ''
    isUpdate.value = true
};

const outLogin = async () => {
    const res = await logoutApi()
    if (res.code === 0) {
        store.userIsLogin = false
        store.userinfo = {}
        store.userId = ''
        await router.push('/index')
    }else{
        Message.error(res.message)
    }
}
router.afterEach((to,from) => {
    currentPath.value[0] = to.path
})
const saveConfig = async () => {
    //校验
    formRef.value.validate()
    if (!isUpdate.value){
        //请求
        const res = await addUserApi(form.value)
        if (res.code === 0) {
            Message.success('保存成功')
            isShowConfig.value = false
            await getUserList()
            return true
        } else {
            Message.error(res.message)
            return false
        }
    }else{
        //请求
        const res = await updateUserApi(form.value)
        if (res.code === 0) {
            Message.success('保存成功')
            isShowConfig.value = false
            await getUserList()
            return true
        } else {
            Message.error(res.message)
            return false
        }
    }
};


const uploadSuccess = (res) => {
    form.value.userAvatar = res.response.data.url
}
const removeUpload = (file) => {
    form.value.userAvatar = ''
    return true
}

</script>

<template>
    <div class="menu-demo">
        <a-menu @menu-item-click="goPath"
                theme="dark" mode="horizontal"
                :default-selected-keys="currentPath">
                <a-menu-item key="0" :style="{ padding: 0, marginRight: '38px' }" disabled>
<!--                    <img src="../assets/logo.png"-->
<!--                         class="rounded-lg"-->
<!--                         style="width: 70px;height: 40px;object-fit: cover;" alt="logo">-->
                    <img src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image"
                         class="rounded-lg"
                         style="width:30px;height: 40px;object-fit: cover;" alt="logo">
                </a-menu-item>
                <a-menu-item key="/index">首页</a-menu-item>
                <a-menu-item key="/template" v-show="store.userIsLogin">模板市场</a-menu-item>
                <a-menu-item key="/surveys" v-show="store.userIsLogin">我的问卷</a-menu-item>
                <a-menu-item v-if="store.userinfo.userRole === 'admin'" key="/template-manage">模板管理</a-menu-item>
                <a-menu-item v-if="store.userinfo.userRole === 'admin'" key="/template-audit">模板审批</a-menu-item>
                <a-menu-item v-if="store.userinfo.userRole === 'admin'" key="/user-manage">用户管理</a-menu-item>
                <a-menu-item v-if="store.userinfo.userRole === 'admin'" key="/file-manage">文件管理</a-menu-item>
                <a-menu-item key="/userinfo" v-show="store.userIsLogin">个人中心</a-menu-item>
                <a-menu-item key="/login" v-show="!store.userIsLogin" @click="goPath('/login')">去登录</a-menu-item>
            <div class="ml-8" v-show="store.userIsLogin">
                <a-dropdown trigger="hover" >
                    <a-avatar >
                        <img
                            alt="avatar"
                            :src="store.userinfo.userAvatar"
                        />
                    </a-avatar>
                    <template #content>
                        <a-doption @click="handleEdit">修改个人信息</a-doption>
                        <a-doption @click="outLogin">退出登录</a-doption>
                    </template>
                </a-dropdown>
            </div>

        </a-menu>


        <a-modal unmount-on-close v-model:visible="isShowConfig" :on-before-ok="saveConfig" ok-text="保存">
            <template #title>
                编辑我的信息
            </template>
            <div>
                <a-form ref="formRef" :model="form"  auto-label-width>
                    <a-form-item field="userAccount" label="用户账号">
                        <p v-show="isUpdate">{{form.userAccount}}</p>
                        <a-input v-show="!isUpdate" name="account1" autocomplete="off" v-model="form.userAccount" placeholder="请输入用户昵称" />

                    </a-form-item>
                    <a-form-item field="userName" label="用户昵称"
                                 :rules="[{required:true,message:'用户昵称'},{minLength:1,maxLength:20,message:'用户昵称最大20字符'}]">
                        <a-input name="name1" autocomplete="off" v-model="form.userName" placeholder="请输入用户昵称" />
                    </a-form-item>
                    <a-form-item field="userPassword" label="用户密码">
                        <a-input-password name="pass1" autocomplete="off" v-model="form.userPassword" placeholder="不填写为不修改" />
                    </a-form-item>
                    <a-form-item field="userPhone" label="用户电话">
                        <a-input v-model="form.userPhone" placeholder="" />
                    </a-form-item>
                    <a-form-item field="userEmail" label="用户邮箱">
                        <a-input v-model="form.userEmail" placeholder="" />
                    </a-form-item>
                    <a-form-item field="userProfile" label="用户简介">
                        <a-input v-model="form.userProfile" placeholder="" />
                    </a-form-item>
<!--                    <a-form-item field="userRole" label="账号状态">-->
<!--                        <a-select v-model="form.userRole" :style="{width:'220px'}">-->
<!--                            <a-option value="admin" disabled>管理员</a-option>-->
<!--                            <a-option value="user">普通用户</a-option>-->
<!--                            <a-option value="ban" :disabled="form.userRole === 'admin'">封禁</a-option>-->
<!--                        </a-select>-->
<!--                    </a-form-item>-->
                    <a-form-item field="userAvatar" label="用户头像" >
                        <a-image
                            class="rounded-lg"
                            width="180"
                            :src="form.userAvatar"
                        />
                        <a-upload
                            class="ml-4" :limit="1"
                            withCredentials
                            name="file"
                            accept="image/*"
                            :on-before-remove="removeUpload"
                            @success="uploadSuccess"
                            :action="BASE_URL + '/files/upload'"/>
                    </a-form-item>
                </a-form>

            </div>
        </a-modal>
    </div>

    <a-watermark v-if="route.path.startsWith('/workbench')" :alpha="0.75"
                 :content="[store.userinfo.userName,dayjs().format('YYYY-MM-DD hh:mm:ss')]">
            <router-view/>
    </a-watermark>
    <router-view v-else/>
</template>

<style>
.arco-menu-overflow-wrap {
    justify-content: center;
}
</style>
